<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <el-form :ref="refName" label-position="top" :model="model" :rules="rules" class="updateForm">
      <el-col v-for="(item,index) in lieNamrArr" :key="index" :span="12">
        <el-form-item :label="getLabel(index)">
          <el-input v-model="model[`data${index+1}`]" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-form>
    <div class="drawer-footer">
      <div class="drawer-footer-btn">
        <el-button @click="modelClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { httpAction } from '@/api/manage'
export default {
  components: {},
  props: {},
  data() {
    return {
      model: {},
      refName: 'ruleForm',
      visible: false,
      disableSubmit: false,
      title: '',
      size: '50%',
      lieNamrArr: [],
      updateState: '',
      tConfig: {},
      rules: {
        column1: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      url: {
        add: '',
        edit: 'generalConfigList.aspx?action=Update'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 列名
    getLabel(val) {
      return `列${val + 1}`
    },
    add() {
      this.updateState = 'add'
      this.visible = true
      this.model = {}
      this.$nextTick(() => {
        this.$refs[this.refName]?.clearValidate()
      })
    },
    edit(lieNamrArr, tConfig) {
      this.tConfig = tConfig
      this.updateState = 'edit'
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
      this.lieNamrArr = lieNamrArr.filter(v => v.prop !== 'yearMonth')
      // console.log('lieNamrArr', this.lieNamrArr)
      // console.log('this.model', this.model)
      for (let index = 0; index < this.lieNamrArr.length; index++) {
        // this.model[`column${index + 1}`] = this.lieNamrArr[index].label
        this.$set(this.model, `data${index + 1}`, this.lieNamrArr[index].label)
      }
    },
    submitForm() {
      // this.model.column4 = this.$moment(this.model.column4).format('YYYY-MM-DD')
      console.log('表单数据', this.model)
      const that = this
      this.$refs[this.refName].validate((valid) => {
        if (valid) {
          let httpurl = ''
          let method = ''
          if (that.updateState === 'add') {
            httpurl = that.url.add
            method = 'post'
          } else if (that.updateState === 'edit') {
            httpurl = that.url.edit
            method = 'post'
          } else {
            that.$message.warning('更新标识无效')
            return
          }
          this.$store.dispatch('app/setLoading', true)
          httpAction(httpurl, { id: this.tConfig.id, cValue: JSON.stringify(that.model) }, method).then((res) => {
            if (res.code === 1) {
              that.modelClose()
              that.$message.success(res.message || '操作成功！')
              that.$emit('ok')
            } else {
              that.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          return false
        }
      })
    },
    modelClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.updateForm{
  padding: 20px 30px 0;
  margin-bottom: 100px;
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
}
::v-deep .el-drawer__body{
  margin-bottom: 80px;
}
.el-col{
  padding: 0 8px;
}
.drawer-footer{
  position:absolute;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:65px;
  background:#fff;
  z-index:999;
  padding: 16px 29px;
  box-shadow: 0px -1px 16px 1px rgba(0,0,0,0.08);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
}
// 内容超长启用滚动条
::v-deep .el-drawer__body {
    overflow: auto;
    // margin-bottom: 100px;
}
// 隐藏滚动条, 隐藏后仍然可以滚动
// ::v-deep .el-drawer__container ::-webkit-scrollbar{
//     display: none;
// }
</style>
